<style scoped>
.split {
  height: 600px;
  background: #ffffff;
  border: 1px solid #dcdee2;
}

.split-pane {
  padding: 10px;
}
</style>
<template>
  <div class="split">
    <Split v-model="split1">
      <div slot="left" class="split-pane">
        <Tree :data="treeData" @on-select-change="changeTree"></Tree>
      </div>
      <div slot="right" class="split-pane">

        <Card style="margin-bottom: 10px">
          <Form inline class="form-search">
            <FormItem>
              <Input v-model="keyword" placeholder="名称/编码" style="width: 200px" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="
  page = 1;
SearchProduct();
              " icon="md-search">查询</Button>
            </FormItem>
            <FormItem>

              <Button type="primary" @click="AddData" icon="md-add">新增</Button>
            </FormItem>
            <FormItem style="float:right">

              <Button type="primary" @click="choseData" icon="md-document">确定</Button>
            </FormItem>

          </Form>

        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"
          :data="tableData" :height="tableHeight" @on-selection-change="selectionChange"></Table>
        <Page :total="total" :current="page" :page-size="size"
          :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]" @on-change="
            (s) => {
              page = s;
              SearchProduct();
            }
          " @on-page-size-change="
  (p) => {
    size = p;
    page = 1;
    SearchProduct();
  }
" show-total show-sizer />

        <Modal :width="600" v-model="modalData" :title="tempData.Id > 0 ? '修改' : '新增'" :mask-closable="false" draggable
          sticky>
          <Form ref="formValidate" :model="tempData" :label-width="70" :rules="ruleValidate">
            <FormItem label="类别" prop="TypeId">
              <treeselect v-model="tempData.TypeId" :searchable="false" placeholder="" :clearable="false"
                :options="selectTreeData" />
            </FormItem>
            <Row>
              <Col span="12">

              <FormItem label="名称" prop="Name">
                <Input v-model="tempData.Name" />
              </FormItem>
              </Col>
              <Col span="12">
              <FormItem label="编码" prop="Code">
                <Input v-model="tempData.Code" />
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="12">

              <FormItem label="价格" prop="Price">
                <Input type="number" v-model="tempData.Price" />
              </FormItem>
              </Col>
              <Col span="12">
              <FormItem label="单位" prop="Unit">
                <AutoComplete v-model="tempData.Unit" :data="unitList" placeholder="" style="width:200px">
                </AutoComplete>

              </FormItem>
              </Col>
            </Row>
            <FormItem label="规格" prop="Specification">
              <Input type="textarea" v-model="tempData.Specification" />
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" @click="modalData = false">取消</Button>
            <Button type="primary" :loading="loading" @click="SaveData">确定</Button>
          </div>
        </Modal>

      </div>
    </Split>

  </div>
</template>

<script>

import { SearchProduct, GetTreeProductType, DeleteProduct, SaveProduct, SearchUnit } from '@/api/product'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { InitProductTypeTree } from '@/libs/tools'
export default {
  name: 'productchose',
  components: {
    Treeselect
  },
  props: ['type'],
  data () {
    return {
      split1: 0.15,
      total: 0,
      page: 1,
      size: 50,
      tableHeight: 450,
      keyword: '',
      typeid: 0,
      ruleValidate: {
        TypeId: [
          {
            type: 'number',
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        Name: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      loadingTable: false,
      modalData: false,
      tempData: {
      },
      typeList: [],
      treeData: [],
      selectTreeData: [],
      tableTitle: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },

        {
          key: 'Name',
          title: '名称',
          minWidth: 200,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Unit',
          title: '单位',
          minWidth: 100,
          resizable: true,
          align: 'center'
        },
        {
          key: this.type == 1 ? 'InPrice' : 'Price',
          title: this.type == 1 ? '采购价' : '销售价',
          width: 100,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Code',
          title: '编码',
          minWidth: 200,
          resizable: true,
          align: 'center'
        },
        {
          key: 'Specification',
          title: '规格',
          minWidth: 300,
          resizable: true,
          align: 'center'
        },

        {
          key: 'Name',
          title: '分类',
          width: 150,
          resizable: true,
          align: 'center'
        }

      ],
      tableData: [],
      unitList: [],
      selectedData: []
    }
  },
  computed: {},
  methods: {
    changeTree (a, b) {
      this.typeid = b.id
      this.SearchProduct()
    },
    selectionChange (val) {
      var currentIds = this.tableData.map(item => { return item.Id })
      this.selectedData = this.selectedData.filter(item => {
        return currentIds.indexOf(item.Id) < 0
      })
      this.selectedData = this.selectedData.concat(val)
    },
    SaveData () {
      let vm = this
      vm.$refs['formValidate'].validate((valid) => {
        if (valid) {
          vm.loading = true
          SaveProduct(vm.tempData).then((res) => {
            vm.loading = false
            const data = res.data
            if (data.StatusCode == 200) {
              vm.modalData = false
              vm.$Message.success({ title: '提示', content: '保存成功' })
              vm.SearchProduct()
              vm.SearchUnit()
            } else {
              vm.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        }
      })
    },
    SearchProduct () {
      let vm = this
      vm.loadingTable = true
      var reqData = {
        keyword: vm.keyword,
        typeid: vm.typeid
      }
      SearchProduct(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.tableData = data.Data.Items
          vm.tableData.forEach(e => {
            e._checked = false
            vm.selectedData.forEach(s => {
              if (s.Id == e.Id) {
                e._checked = true
              }
            })
          })
          vm.total = data.Data.TotalCount
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    GetTreeProductType () {
      let vm = this
      GetTreeProductType(0).then((res) => {
        const data = res.data
        if (data.StatusCode == 200) {
          this.selectTreeData = InitProductTypeTree(data.Data)
          this.treeData = [
            {
              id: 0,
              label: '全部',
              title: '全部',
              value: 0,
              expand: true,
              children: this.selectTreeData
            }

          ]
        } else {
          vm.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    DeleteProduct (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteProduct(id).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.SearchProduct()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },
    SearchUnit () {
      let vm = this
      var reqData = {

      }
      SearchUnit(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.unitList = data.Data.map(m => { return m.Name })
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },

    AddData () {
      this.tempData = {

      }
      this.modalData = true
    },
    choseData () {
      this.$emit('on-success', this.selectedData)
    }
  },

  mounted () {
    this.GetTreeProductType()
    this.SearchProduct()
    this.SearchUnit()
  }
}
</script>
